<section class="studio-main-navigation">
    <div class="studio-main-navigation-header">
        <div class="studio-main-navigation-header-title">
            <div class="studio-logo">
                <div class="studio-logo-circle"></div>
                <div class="studio-logo-square"></div>
            </div>
            <div class="studio-main-navigation-header-title-text">{{'NEW_STUDIO_DASHBOARD.NAME' | translate}}</div>
        </div>
        <div class="studio-main-navigation-header-controls">
            <adf-notification-history menuPositionX="before" menuPositionY="above"></adf-notification-history>
            <modelingsdk-user-info-menu></modelingsdk-user-info-menu>
        </div>
    </div>
    <div class="studio-main-navigation-container">
        <div class="studio-main-navigation-section">
            <a class="studio-main-navigation-main-title">{{'NEW_STUDIO_DASHBOARD.NAVIGATION.PROJECT_TITLE' | translate}}</a>
            <ul class="studio-main-navigation-menu">
                <ng-container *ngFor="let item of navigation.process">
                    <li class="studio-main-navigation-menu-element" routerLinkActive #rla="routerLinkActive"
                        title="{{ item.title || '' | translate }}" *ngIf="!item.disabled">

                        <button mat-icon-button mat-ripple matRippleColor="primary"
                                class="studio-main-navigation-menu-element-button"
                                [routerLink]="item.route.url"
                                [disableRipple]="true"
                                [color]="rla.isActive ? 'primary' : 'accent'"
                                [title]="item.label | translate">
                            <span [ngClass]="{
                                'studio-main-navigation-menu-element-active': rla.isActive,
                                'studio-main-navigation-menu-element': !rla.isActive
                            }">{{ item.label | translate }}</span>
                        </button>

                    </li>
                </ng-container>
            </ul>
        </div>
        <div class="studio-main-navigation-section" *ngIf="navigation.contentModels?.length > 0">
            <a class="studio-main-navigation-main-title">{{'NEW_STUDIO_DASHBOARD.NAVIGATION.CONTENT_MODEL_TITLE' | translate}}</a>
            <ul class="studio-main-navigation-menu">
                <ng-container *ngFor="let item of navigation.contentModels">
                    <li class="studio-main-navigation-menu-element" routerLinkActive #rla="routerLinkActive"
                        title="{{ item.title || '' | translate }}" *ngIf="!item.disabled">

                        <button mat-icon-button mat-ripple [disableRipple]="true" [routerLink]="item.route.url"
                            [color]="rla.isActive ? 'primary' : 'accent'"
                            [title]="item.label | translate">
                            <span [ngClass]="{
                                'studio-main-navigation-menu-element-active': rla.isActive,
                                'studio-main-navigation-menu-element': !rla.isActive
                            }">{{ item.label | translate }}</span>
                        </button>

                    </li>
                </ng-container>
            </ul>
        </div>
        <div class="studio-main-navigation-section" *ngIf="navigation.dataModels?.length > 0">
            <a class="studio-main-navigation-main-title">{{'NEW_STUDIO_DASHBOARD.NAVIGATION.DATA_MODELS_TITLE' | translate}}</a>
            <ul class="studio-main-navigation-menu">
                <ng-container *ngFor="let item of navigation.dataModels">
                    <li class="studio-main-navigation-menu-element" routerLinkActive #rla="routerLinkActive"
                        title="{{ item.title || '' | translate }}" *ngIf="!item.disabled">

                        <button mat-icon-button mat-ripple [disableRipple]="true" [routerLink]="item.route.url"
                            [color]="rla.isActive ? 'primary' : 'accent'"
                            [title]="item.label | translate">
                            <span [ngClass]="{
                                'studio-main-navigation-menu-element-active': rla.isActive,
                                'studio-main-navigation-menu-element': !rla.isActive
                            }">{{ item.label | translate }}</span>
                        </button>

                    </li>
                </ng-container>
            </ul>
        </div>
        <div class="studio-main-navigation-section" *ngIf="navigation.hxpDocumentTypes?.length > 0">
            <a class="studio-main-navigation-main-title">{{'NEW_STUDIO_DASHBOARD.NAVIGATION.HXP_DOC_TYPES_TITLE' | translate}}</a>
            <ul class="studio-main-navigation-menu">
                <ng-container *ngFor="let item of navigation.hxpDocumentTypes">
                    <li class="studio-main-navigation-menu-element" routerLinkActive #rla="routerLinkActive"
                        title="{{ item.title || '' | translate }}" *ngIf="!item.disabled">

                        <button mat-icon-button mat-ripple [disableRipple]="true" [routerLink]="item.route.url"
                            [color]="rla.isActive ? 'primary' : 'accent'"
                            [title]="item.label | translate">
                            <span [ngClass]="{
                                'studio-main-navigation-menu-element-active': rla.isActive,
                                'studio-main-navigation-menu-element': !rla.isActive
                            }">{{ item.label | translate }}</span>
                        </button>

                    </li>
                </ng-container>
            </ul>
        </div>
        <div class="studio-main-navigation-section" *ngIf="navigation.hxpMixins?.length > 0">
            <a class="studio-main-navigation-main-title">{{'NEW_STUDIO_DASHBOARD.NAVIGATION.HXP_MIXINS_TITLE' | translate}}</a>
            <ul class="studio-main-navigation-menu">
                <ng-container *ngFor="let item of navigation.hxpMixins">
                    <li class="studio-main-navigation-menu-element" routerLinkActive #rla="routerLinkActive"
                        title="{{ item.title || '' | translate }}" *ngIf="!item.disabled">

                        <button mat-icon-button mat-ripple [disableRipple]="true" [routerLink]="item.route.url"
                            [color]="rla.isActive ? 'primary' : 'accent'"
                            [title]="item.label | translate">
                            <span [ngClass]="{
                                'studio-main-navigation-menu-element-active': rla.isActive,
                                'studio-main-navigation-menu-element': !rla.isActive
                            }">{{ item.label | translate }}</span>
                        </button>

                    </li>
                </ng-container>
            </ul>
        </div>
        <div class="studio-main-navigation-section" *ngIf="navigation.hxpSchemas?.length > 0">
            <a class="studio-main-navigation-main-title">{{'NEW_STUDIO_DASHBOARD.NAVIGATION.HXP_SCHEMAS_TITLE' | translate}}</a>
            <ul class="studio-main-navigation-menu">
                <ng-container *ngFor="let item of navigation.hxpSchemas">
                    <li class="studio-main-navigation-menu-element" routerLinkActive #rla="routerLinkActive"
                        title="{{ item.title || '' | translate }}" *ngIf="!item.disabled">

                        <button mat-icon-button mat-ripple [disableRipple]="true" [routerLink]="item.route.url"
                            [color]="rla.isActive ? 'primary' : 'accent'"
                            [title]="item.label | translate">
                            <span [ngClass]="{
                                'studio-main-navigation-menu-element-active': rla.isActive,
                                'studio-main-navigation-menu-element': !rla.isActive
                            }">{{ item.label | translate }}</span>
                        </button>

                    </li>
                </ng-container>
            </ul>
        </div>
    </div>
</section>
